<template>
  <div class="map_container marginBottom15">
    <div class="info_containerPadding info_containerBacInfoStyle">
      <h1 class="mainTitleFont">热力图</h1>
      <baidu-map
        class="map"
        :center="{ lng: 114.10201734294776, lat: 22.626744569947313 }"
        :zoom="14"
      >
        <bml-heatmap :data="data" :max="100" :radius="110"> </bml-heatmap>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { BmlHeatmap } from "vue-baidu-map";
export default {
  name: "Baidu_map",
  components: {
    BmlHeatmap,
  },
  data() {
    return {
      data: [{ lng: 114.10201734294776, lat: 22.626744569947313 }],
    };
  },
};
</script>

<style scoped>
.map_container {
  width: 100%;
  height: auto;
}
.map_container .map {
  border-radius: 0.16rem;
  width: 100%;
  height: 3rem;
  /* 解决ios overflow不兼容问题 */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
</style>